<template>
  <div>
      <el-tabs tab-position="left" style="height:500px;">
        <el-tab-pane label="基本信息" class="filter-container">
            <h3>基本信息</h3>
            <el-form ref="form" :model="form" label-width="100px">
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="运输任务编号">
                      <el-input v-model="task.id" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="车牌号码">
                      <el-input v-model="task.licensePlate" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="调度机构">
                      <el-input v-model="调度机构" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="起始地">
                      <el-input v-model="task.startAgency" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="目的地">
                      <el-input v-model="task.endAgency" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <el-divider></el-divider>
            <el-button @click="goToTaskPage()">返回</el-button>
        </el-tab-pane>
        <el-tab-pane label="任务轨迹"  class="filter-container">
          <h3>任务轨迹</h3>
          <el-form ref="form" :model="form" label-width="100px">
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="车牌号">
                      <el-input v-model="task.licensePlate" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="司机">
                      <el-input v-model="task.name" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="计划发车时间">
                      <el-input v-model="task.planDepartureTime" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="实际发车时间">
                      <el-input v-model="task.actualDepartureTime" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="计划到达时间">
                      <el-input v-model="task.planArrivalTime" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="实际到达时间">
                      <el-input v-model="task.actualArrivalTime" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <h3>轨迹查看</h3>
            <el-divider></el-divider>

            <el-button @click="goToTaskPage()">返回</el-button>

        </el-tab-pane>
        <el-tab-pane label="运单详情" name="order"  class="filter-container">

          <h3>共计{{transportOrderList.length}}票运单</h3>
              <el-table
                :data="transportOrderList"
                stripe
                style="width: 100%">
                <!--<el-table-column
                  prop="date"
                  label="序号"
                  width="180">-->
                </el-table-column>
                <el-table-column
                  prop="transportOrderId"
                  label="运单编号"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="orderDTO.createTime"
                  width="200"
                  label="下单时间">
                </el-table-column>
                <el-table-column
                  prop="orderDTO.senderName"
                  label="发件人姓名">
                </el-table-column>
                <el-table-column
                  prop="orderDTO.senderPhone"
                  label="发件人电话">
                </el-table-column>
                <el-table-column
                  prop="orderDTO.senderAddress"
                  label="发件人地址">
                </el-table-column>
                <el-table-column
                  prop="orderCargoDto.quantity"
                  label="货品数量">
                </el-table-column>
                <el-table-column
                  :label="$t('table.operation')"
                  align="center"
                  fixed="right"
                  class-name="small-padding fixed-width"
                  width="150px"
                >
                  <template slot-scope="{row}">
                      <!--<i @click="edit(row)" class="el-icon-edit table-operation" style="color: #2db7f5;" v-hasPermission="['station:update']" />
                    <i @click="singleDelete(row)" class="el-icon-delete table-operation" style="color: #f50;" v-hasPermission="['station:delete']" />-->
                    <a style="color: #009EFF;" @click="info(row)" >查看详情</a>

                  </template>
                </el-table-column>
              </el-table>
        </el-tab-pane>
        <el-tab-pane label="交付照片">
            <div  class="filter-container">
              <h3>交付货品照片</h3>
              <img src="image/task.deliverPicture"/>
            </div><br/>
             <div  class="filter-container">
              <h3>支付回单照片</h3>
              <img src="image/task.transportCertificate"/>
            </div>
        </el-tab-pane>
        <el-tab-pane label="提货照片" class="filter-container">
          <div  class="filter-container">
              <h3>提货货品照片</h3>
              <img src="image/task.cargoPicture"/>
            </div><br/>
             <div  class="filter-container">
              <h3>提货凭证照片</h3>
              <img src="image/task.cargoPickUpPicture"/>
            </div>
        </el-tab-pane>
      </el-tabs>{{task}}
  </div>
</template>

<script>
import transportTaskApi from '@/api/TransportTask.js'
export default {
  data() {
    return {
      task:this.$route.query.data,
      transportOrderList:[]

    }
  },
  methods:{
      goToTaskPage(){
         this.$router.push("/transport-task")
      },
      queryTransportOrderByTransportTaskId(){
          transportTaskApi.queryTransportOrder({ id: this.task.id }).then(response => {
            const res = response.data
            this.transportOrderList=res;
          })
      },
      info(row){
        this.$router.push({path:"/transport-task/info",query:{data:row}})
      }
  },
  mounted:function(){
    this.queryTransportOrderByTransportTaskId();
  }
}
</script>

<style>

</style>
